<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>固定定位练习2</title>
		<style>
			.mask{
				background-color: rgba(0, 0, 0, .5);
				/* 撑满全屏:使用固定定位定位且四个方向值都为08 */
				position: fixed;
				top:0;
				bottom: 0;
				left: 0;
				right: 0;
			}
			/* 登录框 */
			.mask .login{
				width: 600px;
				height: 500px;
				background-color: #fff;
				padding: 20px;
				/* 当一个明确宽高的子元素使用绝对定位四个方向的值为0,可以结合margin:auto;
				实现在父元素中的水平居中 */
				/* 脱离文档流 */
				position: absolute;
				/* 四个方向全为0,然后居中 */
				top:0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
			/* 为登录框的input做统一样式设置 */
			.mask .login input{
				width: 100%;
				height: 30px;
				padding: 0 10px;
				margin-top: 20px;
				/* 变成盒子模型 */
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<!-- <div class="text">
			假装背后有一大段文字
			lorem*40
		</div> -->
		<!-- 遮罩层 -->
		<div class="mask">
			<div class="login">
				<iframe src="__xiangmuxinxidengji.html" width="100%" height="100%" frameborder="0"></iframe>
			</div>
		</div>
	</body>
</html>